<div class="view">
  <div class="view-title">
    投票
    <button class="embedded" @click="add" v-if="authorized">
      添加
      <i class="material-icons">add</i>
    </button>
  </div>
  <div class="view-search">
    <i class="material-icons">search</i>
    <div class="input-group">
      <input v-model="searchInput" @keydown.esc="searchInput = ''">
      <div class="border-line"></div>
    </div>
    <div class="clear-btn" @click="searchInput = ''" v-show="searchInput" transition="opacity">
      <i class="material-icons">close</i>
    </div>
  </div>

  <div class="list">
    <div class="list-item clickable"
      v-for="vote of votes | filterBy searchInput in 'name'"
      track-by="$index"
      :class="{ bold: vote.status.running }"
      @click="viewVote(vote)">

      <div class="list-item-indicator"></div>
      <div class="list-item-content vote-row">
        <div class="vote-name">
          {{ vote.name }}
        </div>
        <div class="vote-rounds-wrapper">
          <span class="vote-iteration" v-show="vote.status.iteration > 0">{{ vote.status.iteration }}</span>
          <span class="vote-iteration" v-else>未启动</span>
          <template v-if="vote.rounds > 0">
            <span class="vote-rounds-separator">/</span>
            <span class="vote-rounds">{{ vote.rounds }}</span>
          </template>
        </div>
        <div class="vote-spanner"></div>
        <div class="vote-type" v-if="vote.target === -1">
          不计弃权三分之二
        </div>
        <div class="vote-values">
          <span class="vote-value positive">{{ countVotes(vote, 1) }}</span>
          <span class="vote-value-separator">/</span>
          <span class="vote-value negative">{{ countVotes(vote, -2) }}</span>
          <span class="vote-value-separator">/</span>
          <span class="vote-value abstained">{{ countVotes(vote, -1) }}</span>
          <span class="vote-value-separator" v-if="vote.target !== 0">/</span>
          <span class="vote-value target" v-if="vote.target > 0">{{ vote.target }}</span>
          <span class="vote-value target" v-if="vote.target === -1">{{ getFileTwoThird(vote) }}</span>
        </div>
        <div class="vote-seats">
          <i class="material-icons">person</i>
          {{ vote.matrix.length }}
        </div>
      </div>
    </div>
    <template v-if="!searchInput">
      <div class="empty-hint" v-if="authorized">请点击添加创建投票</div>
      <div class="empty-hint" v-else>无投票</div>
    </template>
    <div class="empty-hint" v-else>无搜索结果</div>
  </div>

  <div class="dialog-overlap" transition="opacity" v-show="addFlag" @click="discardAddition">
    <div class="dialog" @click.stop.prevent>
      <div class="dialog-title">
        添加投票
      </div>
      <div class="dialog-content">
        <div class="dialog-supporting">
          注: 参与投票的席位为提交时出席的席位，在添加投票后无法更改。
        </div>
        <div class="input-group">
          <div class="hint">显示名</div>
          <input v-model="inputName">
          <div class="border-line"></div>
        </div>
        <div class="input-group">
          <div class="hint">轮数 ( 0 = 不限 )</div>
          <input v-model="inputRounds" type='number' min='0' number>
          <div class="border-line"></div>
        </div>
        <div class="list">
          <div class="list-item clickable" :class="{ bold: isSubstantive }" @click="isSubstantive = !isSubstantive">
            <div class="list-item-indicator"></div>
            <div class="list-item-content">使用不计弃权三分之二多数</div>
          </div>
        </div>
        <template v-if="!isSubstantive">
          <div class="input-group">
            <div class="hint">目标 ( 0 = 未定 )</div>
            <input v-model="inputTarget" type='number' min='0' number>
            <div class="border-line"></div>
          </div>
          <button @click="setToHalf" class="embedded">设为简单半数</button>
          <button @click="setToTwoThird" class="embedded">设为三分之二</button>
        </template>
        <button @click="performAddition" class="confirmation-btn">
          提交
          <i class="material-icons">keyboard_arrow_right</i>
        </button>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</div>
